<template>
  <div>
    <!-- 专利，后续的付费流程，专用 -->
    <!-- 缴费 弹框 -->
    <Modal
      v-model="payBox"
      :footer-hide="true"
      :mask-closable="false"
      width="750"
      @on-visible-change="vPayChange"
      :title="'专利号：'+($app.judgeData(orderInfo.patent_number)?orderInfo.patent_number:'-')"
    >
      <Row :gutter="30">
        <Col :span="18" style="border-right:1px #eee solid;">
          <div
            class="f_40 cWhite marginT10 f_bold blockCenter marginB10"
            style="width:313px;height:100px; padding:20px 0 0 45px;"
            :style="'background-image:url('+KkuT+')'"
          >极速缴费</div>
          <div class="textCenter">
            <div class="f_16 c888">
              由
              <span class="relative" style="top:3px;">
                <i class="iconfont marginR5 marginL5 cBlue f_30">&#xe60c;</i>
                <i class="iconfont f_24 marginR5 c333">&#xe60a;</i>
              </span>
              代缴费
            </div>
            <div class="marginB20">
              <span class="c888 marginR5 f_18">¥</span>
              <template v-if="orderInfo.state==5">
                <span class="f_bold cRed f_30 marginR10">{{ parseFloat(orderInfo.apply_money)}}</span>
                <span class="c888">
                  （官费：¥
                  <span class="marginR10 f_18 cRed">{{parseFloat(orderInfo.apply_official_fee)}}</span>
                  服务费：¥
                  <span class="f_18 cRed">{{parseFloat(orderInfo.apply_service_fee)}}</span>
                  ）
                </span>
              </template>
              <template v-if="orderInfo.state==14">
                <span class="f_bold cRed f_30 marginR10">{{parseFloat(orderInfo.auth_money)}}</span>
                <span class="c888">
                  （年费：¥
                  <span class="marginR5 f_18 cRed">{{parseFloat(orderInfo.auth_year_fee)}}</span>
                  服务费：¥
                  <span class="marginR5 f_18 cRed">{{parseFloat(orderInfo.auth_service_fee)}}</span>
                  印花税：¥
                  <span class="f_18 cRed">{{parseFloat(orderInfo.auth_stamp_duty_fee)}}</span>
                  ）
                </span>
              </template>
            </div>

            <Divider orientation="left" class="marginT10 marginB10 f_16">支付类型</Divider>
            <div style="height:70px; overflow:hidden;">
              <div class="textLeft" v-show="ioShow" >
                <Row class="f_16">
                  <Col span="2" style="visibility:hidden;">x</Col>
                  <Col span="12">
                    <div class="marginB10">
                      当前余额：
                      <span class="f_bold c333">{{ongW()}}</span>
                    </div>
                    <div>
                      剩余：
                      <span class="f_bold cRed f_20">{{(overM1<0)?'余额不足':overM1}}</span>
                    </div>
                  </Col>
                  <Col span="10">
                    <div class="marginB10">
                      当前猫币：{{owtM()}}
                      <!-- <span class="cRed" v-show="!jYcatB">
                        （剩余：
                        <span class="f_bold">{{overM2}}</span>）
                      </span> -->
                    </div>
                    <Checkbox v-model="catY" @on-change="catFun" :disabled="jYcatB">
                      <span class="f_16">
                        <i
                          class="iconfont cBlue marginL5 marginR5 f_20 relative"
                          style="top:3px;"
                        >&#xe60c;</i> 使用猫币
                      </span>
                    </Checkbox>
                  </Col>
                </Row>
              </div>
              <div v-show="!ioShow" class="textCenter f_24" style="color:#eee; padding:15px 0;">
                <Icon type="md-refresh" size="36" class="relative" />运算中...
              </div>

            </div>
            
            <Divider class="marginT10 marginB10"></Divider>
            <Button
              type="primary"
              size="large"
              shape="circle"
              style="padding:5px 50px;"
              class
              @click="nM(1)"
              v-show="!(overM1<0)"
            >
              <Icon
                type="md-checkmark-circle-outline"
                size="18"
                class="marginR5 relative"
                
              />支 付
            </Button>
            <Button
              type="primary"
              size="large"
              shape="circle"
              style="padding:5px 50px;"
              class
              @click="nM(3)"
              v-show="(overM1<0)"
            >
              <Icon type="logo-yen" size="16" class="marginR5 relative"  />充 值
            </Button>
          </div>
        </Col>
        <Col :span="6">
          <div class="textCenter">
            <div class="c999 f_16 marginB20" style="padding-top:130px;">已自行线下缴费</div>
            <Button
              type="primary"
              size="large"
              shape="circle"
              style="padding:5px 30px;"
              ghost
              @click="nM(2)"
            >已缴费</Button>
          </div>
        </Col>
      </Row>
    </Modal>

    <RechargeBox ref="rechargeBox" :companyAll="companyAll" :userPower="userPower"/>
    
  </div>
</template>



<script>
import KkuT from "@$@/img/kkuT.png";
import RechargeBox from "@$@/_service/rechargeBox";
export default {
  name: "payZL",
  components: { RechargeBox },
  data() {
    let data = {
      orderInfo: "", //订单信息

      catY: true, //是否使用猫币支付
      jYcatB: false, //禁用猫币框

      overM1: 0, //剩余余额
      overM2: 0, //剩余猫币
      companyAll: '',
      userPower:''
    };
    let tool = {
      ioShow: false,
      KkuT, //背景图
      payBox: false //缴费弹框
    };
    return Object.assign(data, tool);
  },
  created(){},
  mounted() {},
  methods: {
    //当前余额运算
    ongW() {
      let out = parseFloat(this.companyAll.balance);
      return out;
    },
    //当前猫币
    owtM() {
      let out = parseFloat(this.companyAll.currency);
      return out;
    },
    // 弹框显示隐藏
    vPayChange(buEr) {
      if (buEr) {//显示
        // 全局更新 钱
        $ajax.pInfo(resData => {
          //改变全局的钱
          this.companyAll = resData;

          let judge = resData.currency > 0; //当前猫币是否为大于零

          this.catY = judge;
          this.jYcatB = !judge;

          // //猫币支付选择
          this.catFun(judge);
        });

        $ajax.userInfo(resData=>{
          this.userPower=resData;
        });

      } else {
        //隐藏
        console.log("关闭弹框");
        this.ioShow = false;
      }
    },
    //猫币支付选择
    catFun(buEr) {
      this.ioShow = true; //显示金额框
      let {
        orderInfo: {
          // 总（2加） 官 服
          //申请费=官费+服务费
          apply_money,//申请费
          apply_official_fee,//官方
          apply_service_fee,//服务费

          //总（3加） 官 服
          //办理登记费 = 官费 (年费+印花税) +服务费
          auth_money,//办理登记费
          auth_year_fee,//年费
          auth_stamp_duty_fee,//印花税
          
          auth_service_fee,//服务费


          state //5申请费 14办理登记费
        }
      } = this;

      let official_fee = ""; //官费
      let service_fee = ""; //服务费
      let order_money = ""; //总费

      if (state == 5) {
        official_fee = parseFloat(apply_official_fee);
        service_fee = parseFloat(apply_service_fee);
        order_money = parseFloat(apply_money);
      } else if (state == 14) {
        official_fee = $app.accAdd(parseFloat(auth_year_fee),parseFloat(auth_stamp_duty_fee));
        service_fee = parseFloat(auth_service_fee);
        order_money = parseFloat(auth_money);
      }

      console.log(state,'服务费 = ',official_fee);

      //账户里的钱
      let {
        companyAll: {
          currency, //猫币
          balance//余额
        }
      } = this;

      if (!!buEr) {
        //使用猫币支付
        //剩余 余额，猫币 判断

        // 用户猫币-订单猫币= 小于零（从余额里扣除），大于零 或 等于零（直接从猫币里扣除）
        let pp = $app.accSub(parseFloat(currency),service_fee); //猫币
        let zz = $app.accSub(parseFloat(balance),official_fee); //余额

        if (pp < 0) {
          //小于零（从余额里扣除)
          this.overM2 = 0; //剩余 猫币
          this.overM1 = $app.accAdd(zz,pp); //剩余 余额(正数+负数)
        } else {
          //大于零 或 等于零（直接从猫币里扣除）
          this.overM2 = pp; //剩余 猫币
          this.overM1 = zz; //剩余 余额
        }
      } else {
        //不使用猫币支付
        this.overM2 = parseFloat(currency); //剩余 猫币
        this.overM1 = $app.accSub(parseFloat(balance),order_money); //剩余 余额
      }
    },
    //缴费 1余额支付,2自行缴费,3跳去充值页面
    nM(type) {
      let {
        orderInfo: { 
          id: patent_id
        },
        catY//true选中 false没选中
      } = this;

      let use_currency=!!catY?1:0;

      if(type==3){//余额充值
        this.$refs['rechargeBox'].rechargeBox=true;//显示弹框
      }else{
        $ajax.patPayP(patent_id,type,use_currency,resData=>{
          
          this.payBox=false;//关闭选择框

          let text=(type==1?'支付成功':'操作成功');
          $app.toast(text,true);
          // 全局更新 钱
          $ajax.pInfo();
          this.$parent.$parent.getData();//调用父亲初始化数据方法
        });
      }

      
    }
  }
};
</script>

